import React from 'react';
import { useSoundStore } from '../stores/RootStore';
import { playClickSound } from '../assets/sounds/demo-sound';

const GamePage: React.FC = () => {
  const soundStore = useSoundStore();
  const [gameState, setGameState] = React.useState<string>('准备开始游戏...');
  const [counter, setCounter] = React.useState<number>(0);

  // 开始游戏
  const startGame = () => {
    if (soundStore.canPlaySound()) {
      playClickSound();
    }
    setGameState('游戏进行中...');
    setCounter(1);
  };

  // 增加计数
  const incrementCounter = () => {
    if (soundStore.canPlaySound()) {
      playClickSound();
    }
    setCounter(prev => prev + 1);
  };

  // 重置游戏
  const resetGame = () => {
    if (soundStore.canPlaySound()) {
      playClickSound();
    }
    setGameState('准备开始游戏...');
    setCounter(0);
  };

  return (
    <div className="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8">
      <h1 className="text-3xl font-bold text-center text-dark mb-6">哈希游戏</h1>
      
      <div className="text-center mb-8">
        <p className="text-xl text-gray-700 mb-2">{gameState}</p>
        <p className="text-5xl font-bold text-primary">{counter}</p>
      </div>
      
      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <button
          onClick={startGame}
          className="bg-primary hover:bg-primary-700 text-white font-medium py-3 px-8 rounded-lg transition-colors"
          disabled={gameState === '游戏进行中...'}
        >
          开始游戏
        </button>
        
        <button
          onClick={incrementCounter}
          className="bg-secondary hover:bg-secondary-700 text-white font-medium py-3 px-8 rounded-lg transition-colors"
          disabled={gameState !== '游戏进行中...'}
        >
          增加计数
        </button>
        
        <button
          onClick={resetGame}
          className="bg-gray-500 hover:bg-gray-600 text-white font-medium py-3 px-8 rounded-lg transition-colors"
        >
          重置游戏
        </button>
      </div>
      
      <div className="mt-10 bg-gray-50 p-6 rounded-lg">
        <h3 className="text-lg font-bold mb-3 text-dark">游戏说明</h3>
        <ul className="space-y-2 text-gray-700">
          <li className="flex items-start gap-2">
            <span className="text-primary mt-1">•</span>
            <span>点击"开始游戏"按钮启动游戏</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-primary mt-1">•</span>
            <span>点击"增加计数"按钮增加分数</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-primary mt-1">•</span>
            <span>点击"重置游戏"按钮重新开始</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-primary mt-1">•</span>
            <span>使用顶部导航栏控制声音和语言</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default GamePage;